Quasar.lang.set(Quasar.lang.zhHans)

var appVM = new Vue({
	el: '#q-app',
	data: function() {
		return {
			tableDataLoading: false,
			tablePagination: {
				page: 1,
				rowsPerPage: 10,
				rowsNumber: 10
			},
			tableColumns: [
				{ align: 'left', name: 'bankCardNumber', field: 'bankCardNumber', label: '银行卡号' },
				{ align: 'left', name: 'bankCardAddress', field: 'bankCardAddress', label: '开户行' },
				{ align: 'left', name: 'holderName', field: 'holderName', label: '持卡人姓名' },
				{ align: 'left', name: 'holderPhone', field: 'holderPhone', label: '联系电话' },
				{ align: 'left', name: 'createTime', field: 'createTime', label: '创建时间' },
				{ align: 'left', name: 'action', label: '操作' }
			],
			tableData: [],
			showAddDialogFlag: false,
			newBankCard: {
				bankCardNumber: '',
				bankCardAddress: '',
				holderName: '',
				holderPhone: ''
			},
			showEditDialogFlag: false,
			editBankCard: {},
			selectedBankCardId: ''
		}
	},
	mounted: function() {
		this.loadTableData({});
	},
	methods: {
		showAddDialog: function() {
			this.showAddDialogFlag = true;
			this.newBankCard = {
				bankCardNumber: '',
				bankCardAddress: '',
				holderName: '',
				holderPhone: ''
			};
		},
		addBankCard: function() {
			var that = this;
			if (!that.newBankCard.bankCardNumber || !that.newBankCard.bankCardAddress || !that.newBankCard.holderPhone || !that.newBankCard.holderName) {
				that.$q.notify({
					type: 'negative',
					message: '请填写所有必填项'
				});
				return;
			}
			that.$http.post('/bankCardMean/addBankManage', that.newBankCard).then(function(res) {
				that.$q.notify({
					progress: true,
					timeout: 1000,
					type: 'positive',
					message: '添加成功'
				});
				that.showAddDialogFlag = false;
				that.refreshTable();
			}).catch(function(error) {
				console.error('添加银行卡失败:', error);
				that.$q.notify({
					type: 'negative',
					message: '添加失败，请重试'
				});
			});
		},
		showEditDialog: function(id) {
			var that = this;
			that.$http.get('/bankCardMean/queryBackInfoById', {
				params: { id: id }
			}).then(function(res) {
				that.editBankCard = res.body.data;
				that.selectedBankCardId = id;
				that.showEditDialogFlag = true;
			}).catch(function(error) {
				console.error('查询银行卡信息失败:', error);
				that.$q.notify({
					type: 'negative',
					message: '查询失败，请重试'
				});
			});
		},
		updateBankCard: function() {
			var that = this;
			if (!that.editBankCard.bankCardAddress || !that.editBankCard.holderPhone) {
				that.$q.notify({
					type: 'negative',
					message: '请填写所有必填项'
				});
				return;
			}
			that.$http.post('/bankCardMean/updateBackInfo', that.editBankCard).then(function(res) {
				that.$q.notify({
					progress: true,
					timeout: 1000,
					type: 'positive',
					message: '修改成功'
				});
				that.showEditDialogFlag = false;
				that.refreshTable();
			}).catch(function(error) {
				console.error('更新银行卡失败:', error);
				that.$q.notify({
					type: 'negative',
					message: '修改失败，请重试'
				});
			});
		},
		deleteBankCard: function(id) {
			var that = this;
			that.$q.dialog({
				title: '提示',
				message: '确定要删除吗?',
				cancel: true,
				persistent: true
			}).onOk(function() {
				that.$http.get('/bankCardMean/deleteBackInfo', {
					params: { id: id }
				}).then(function(res) {
					that.$q.notify({
						progress: true,
						timeout: 1000,
						type: 'positive',
						message: '删除成功'
					});
					that.refreshTable();
				}).catch(function(error) {
					console.error('删除银行卡失败:', error);
					that.$q.notify({
						type: 'negative',
						message: '删除失败，请重试'
					});
				});
			});
		},
		refreshTable: function() {
			this.loadTableData({});
		},
		loadTableData: function(param) {
			var that = this;
			that.tableDataLoading = true;
			that.$http.get('/bankCardMean/queryBackInfo', {
				params: {}
			}).then(function(res) {
				console.log('查询结果:', res.body.data);
				that.tableData = (res.body.data || []).map(item => ({
					...item,
					createTime: that.formatDate(item.createTime)
				}));
				that.tableDataLoading = false;
			}).catch(function(error) {
				console.error('加载数据失败:', error);
				that.tableDataLoading = false;
				that.$q.notify({
					type: 'negative',
					message: '加载数据失败，请重试'
				});
			});
		},
		formatDate: function(dateStr) {
			if (!dateStr) return '';
			const date = new Date(dateStr);
			return date.toLocaleDateString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			});
		}
	}
});